<template>
    <n-form :model="form" :rules="rules" ref="formRef" size="large">
        <n-form-item-row label="用户名" path="username">
            <n-input placeholder="请输入用户名" v-model:value="form.username"/>
        </n-form-item-row>
        <n-form-item-row label="密码" path="password">
            <n-input type="password" placeholder="请输入密码" v-model:value="form.password"
                     @keydown.enter.prevent="handleLogin"/>
        </n-form-item-row>
    </n-form>
    <n-button type="primary"
              :loading="loading"
              size="large"
              class="bg-green-600 dark:bg-green-400"
              block @click="handleLogin">
        登录
    </n-button>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {debounce} from "@/utils";
import {useUserStore} from "@/store";


const emits =defineEmits( ['onSubmit'])
const loading =ref(false)
const userStore = useUserStore()
const form= ref<ILoginForm>({
    username:'',
    password:'',
})

const formRef = ref()
const rules = ref({
    username: [{
        required: true,
        message: '请输入用户名',
        trigger: ['input']
    }],
    password: [{
        required: true,
        message: '请输入密码',
        trigger: ['input']
    }],
})

const handleLogin = debounce(() => {
  window.$message.info('登录')
    formRef.value.validate((error: any) => {
        if (!error) {
            // loading.value=true
            // api.user.login({
            //     username: form.value.username,
            //     password: encrypt(form.value.password)
            // }).then((res: any) => {
            //     emits('onSubmit')
            //     userStore.setUserInfo(res.data.data.userInfo)
            //     userStore.setToken(res.data.data.token)
            //     userStore.setRefreshToken(res.data.data.refreshToken)
            // }).finally(()=>{
            //     loading.value=false
            // })
        }
    })
  emits('onSubmit')

}, 400)
</script>

<style scoped>

</style>
